fashion-ssr-vue3/pages/blog/[slug].vue

<script lang='ts' setup>
import { getBlogsDetailApi, getReleaseBlogApi } from '~/api/model/blogs'
import { ConstKeys } from '~/enums/const-enums'

const route = useRoute()
const detail = ref<any>({})
const tabValue = ref('blog')

const options = ref([
  {
    label: 'Read Blog',
    value: 'blog',
  },
  {
    label: 'Preview Catalog',
    value: 'catalog',
  },
])
const relatedCatalog = ref<any>({
  thumbnailUrl: 'https://picsum.photos/300/200',
  contentTitle: 'EJET Spark Catalog Title',
  contentSubhead: 'EJET Spark catalog description, spark the trend, ignate sales.',
})
const slug = route.params.slug
// const { data, pending, error, refresh } = await useAsyncData(
//   'blog-detail',
//   () =>
//     $fetch(`${ConstKeys.DOMAINPRO}/client/content/detail`, { params: { slug } }),
// )
// const seoData = data.value?.result
// detail.value = seoData

async function getVideoOrBlogsDetail() {
  const res = await getBlogsDetailApi({
    slug,
  })
  detail.value = res
}
getVideoOrBlogsDetail()
</script>

<template>
  <div class="blog-detail">
    <div class="bg-#F3F4FB ">
      <div class="pt-175px pb-110px w-1200-auto flex px-60px">
        <img :src="detail.thumbnailUrl" alt="" srcset="" class="w-410px h-256px b-rd-10px object-cover mr-40px">
        <div class="flex-1 text-left">
          <div class="b-rd-400px left-10px text-center w-138px h-32px lh-32px bg-#f9fafd text-#9B6CFF text-14px mb-20px">
            {{ detail.category_dictText }}
          </div>
          <h1
            class="!mb-20px fw-800 text-40px ls-2 text-#333 line-clamp-2 lh-50px custom-title-font"
          >
            <!-- {{ detail.contentTitle }} -->
            EJET Spark Blog Title Trend Report about Catalog
          </h1>
          <div class="text-16px text-#999 lh-24px">
            <!-- {{ detail.contentSubhead }} -->
            EJET Spark description, spark the trend, ignate sales. EJET Spark catalog description, spark the trend, ignate sales. EJET Spark description, spark the trend, ignate sales. EJET Spark catalog description, spark the trend, ignate sales.
          </div>
        </div>
      </div>
    </div>
    <div class="w-1200-auto flex pt-30px">
      <div class="w-840px mr-60px">
        <el-segmented v-model="tabValue" :options="options">
          <template #default="scope">
            <div>
              <div>{{ scope.item.label }}</div>
            </div>
          </template>
        </el-segmented>
        <div v-show="tabValue === 'blog'" class="mt-30px content-detail custom-html" v-html="detail.content" />
        <div v-show="tabValue === 'catalog'" class="mt-30px">
          <iframe
            src="http://47.99.151.233:9006/js/baozhen.pdf#view=FitH&toolbar=0&scrollbar=0&navpanes=0"
            allowfullscreen
            width="100%"
            height="1000px"
            style="border: none"
          >
            您的浏览器不支持iframe，请使用现代浏览器查看PDF。
          </iframe>
        </div>
      </div>
      <div class="flex-1">
        <div class="pos-relative mb-40px">
          <img :src="relatedCatalog.thumbnailUrl" alt="" srcset="" class="w-375px h-240px b-rd-10px object-cover">
          <h4
            class="!mb-15px !mt-30px fw-800 text-24px text-#333 line-clamp-2"
          >
            {{ relatedCatalog.contentTitle }}
          </h4>
          <div class="text-14px text-#999 lh-22px line-clamp-2 mb-20px">
            {{ relatedCatalog.contentSubhead }}
          </div>
          <el-button class="!bg-#9B6CFF !text-#fff !b-#9B6CFF !b-rd-380px text-14px fw-bold !h-32px px-20px">
            Download Catalog
          </el-button>
        </div>
        <div class="px-40px pt-34px bg-#E7EAFF b-rd-10px text-center custom-main">
          <div class="text-#333 fw-500">
            Contact Us to Get
          </div>
          <div class="text-#333 fw-500 my-6px">
            Exclusive Trending Products
          </div>
          <div class="text-#333 fw-500">
            Solutions
          </div>
          <el-button class="mt-20px !bg-#fff !text-#9B6CFF !w-160px !h-40px !b-0px !b-rd-200px" round>
            <nuxt-link :to="{ name: 'contact' }">
              Contact Us
            </nuxt-link>
          </el-button>
        </div>
      </div>
    </div>
    <common-block-blog class="!pb-0" />
    <AppFooter />
  </div>
</template>

<style lang='less' scoped>
 .el-segmented  {
  --el-segmented-item-selected-color: #fff;
  --el-segmented-item-selected-bg-color: #9B6CFF;
  --el-border-radius-base: 16px;
  --el-segmented-bg-color: #F9FAFB;
  --el-segmented-color: #333;
  width: 100%;
  height: 68px;
  line-height: 68px;
  border-radius: 300px!important;
  overflow: hidden;
  padding: 0;
  ::v-deep .el-segmented__group {
    .el-segmented__item-selected,.el-segmented__item{
      border-radius: 300px!important;
      overflow: hidden;
      .el-segmented__item-label{
        font-size: 18px;
      }
    }
  }
}
.blog-detail {
  ::v-deep(.content-detail) {
    font-family: sans-serif;
    h2 {
      font-size: 1.5em;
      font-family: "CustomTitleFont";
      margin-top: 1em !important;
      margin-bottom: 1em !important;
      font-weight: bold;
    }
    h3 {
      display: block;
      font-size: 1.17em;
      margin-block-start: 1em;
      margin-block-end: 1em;
      margin-inline-start: 0px;
      margin-inline-end: 0px;
      margin-bottom: 1em !important;
      font-weight: bold;
      unicode-bidi: isolate;
      font-family: "CustomTitleFont";
    }
    p {
      display: block;
      margin-block-start: 1em;
      margin-block-end: 1em;
      margin-inline-start: 0px;
      margin-inline-end: 0px;
      unicode-bidi: isolate;
    }
    ul {
      display: block;
      list-style-type: disc;
      margin-block-start: 1em;
      margin-block-end: 1em;
      margin-inline-start: 0px;
      margin-inline-end: 0px;
      padding-inline-start: 40px;
      unicode-bidi: isolate;
      li {
        display: list-item;
        text-align: -webkit-match-parent;
        unicode-bidi: isolate;
      }
    }
    ol {
      list-style-type: decimal;
      display: block;
      list-style-type: decimal;
      margin-block-start: 1em;
      margin-block-end: 1em;
      margin-inline-start: 0px;
      margin-inline-end: 0px;
      padding-inline-start: 40px;
      unicode-bidi: isolate;
    }
  }
}
.custom-main{
  background: url('~/assets/images/swiper_bg.png') no-repeat center center;
  background-size: cover;
  width: 300px;
  height: 190px;
}
</style>